<template>
	<view class="mov-area-all" :style="{height: height}" @touchstart="onTouchstart" @touchmove="onTouchmove"
		@touchend="onTouchend">
		<view v-for="(item, index) in movList" class="mov-view-list" :class="item.indexClass"
			:style="{left: item.x + 'rpx'}" :key="index">
			<view :style="{ backgroundColor: item.data.bgColor, backgroundImage: `url(${item.data.url})`}"
				class="mov-area-con" :class="item.conClass" @click="handleClick(item.data)">
				<view class="vipCaed">
					<p class="vipCaedTitle">{{item.data.productName}}</p>
					<p class="vipCaedNum">{{item.data.msqGoodsAttrValue.buyNumber}}<text style="font-size: 32rpx;">次</text></p>
				</view>
				<view class="vipCaed">
					<p class="vipCaedTitle">剩余次数</p>
					<p class="vipCaedNum">{{item.data.leftNum}}<text style="font-size: 32rpx;">次</text></p>
				</view>
				<!-- <view class="rightButton">
					再买一次
				</view> -->
				<view class="vipCaedDesc">
					<p>{{item.data.msqGoods.blurb}}</p>
				</view>
				<!-- <slot :movSlotData="item.data"></slot> -->
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'MovableSwiper',
	props: {
		/**
		 * 传入的数据数组
		 */
		lastDataList: {
			type: Array,
			default: function() {
				return [];
			}
		},
		/**
		 * 卡片高度
		 */
		height: {
			type: String,
			default: '360rpx'
		},
	},
	data() {
		return {
			canMove: true,
			movType: 0,
			touchIndex: 0,
			clientX: 0,
			moveX: 0,
			movList: [
				{ id: 0, indexClass: 'one', conClass: '', x: 0, data: null },
				{ id: 1, indexClass: 'two', conClass: '', x: 0, data: null },
				{ id: 2, indexClass: 'three', conClass: '', x: 0, data: null },
				{ id: 3, indexClass: 'four', conClass: '', x: 0, data: null },
				{ id: 4, indexClass: 'left', conClass: '', x: -750, data: null }
			],
			dataIndex: 0,
		};
	},
	watch: {
		lastDataList: {
			handler(newVal) {
				if (newVal.length > 0) {
					this.movInit();
				}
			},
			immediate: true, // 立即触发一次监听
			deep: true // 深度监听数组的变化
		}
	},
	mounted() {
		
	},
	methods: {
		movInit() {
			if (this.lastDataList.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '无数据',
				});
				return;
			}
			this.dataIndex = 0;
			this.movList.forEach((item, index) => {
				item.data = this.lastDataList[(this.dataIndex + index) % this.lastDataList.length];
				item.data.url='http://store-profit-system.oss-cn-shanghai.aliyuncs.com/uniappImg/homeTopBg.png'
				item.data.msqGoods.blurb = item.data.msqGoods.blurb.replace(/<[^>]+>/g, '')
				console.log(item.data,item.data.msqGoods.blurb,"this.lastDataList")
			});
		},
		onTouchstart(e) {
			if (!this.canMove || this.lastDataList.length === 0) {
				return;
			}
			this.clientX = parseInt(e.touches[0].clientX);
		},
		onTouchmove(e) {
			if (!this.canMove || this.lastDataList.length === 0) {
				return;
			}
			this.moveX = parseInt(e.touches[0].clientX);
			if (this.movType === 0) {
				if (this.moveX > (this.clientX + 20)) {
					this.movType = 1;
					this.touchIndex = this.movList.find(item => item.indexClass.includes('left')).id;
					this.movList[this.touchIndex].data = this.lastDataList[(this.dataIndex - 1 + this.lastDataList.length) % this.lastDataList.length];
				} else if (this.moveX < (this.clientX - 20)) {
					this.movType = 2;
					this.touchIndex = this.movList.find(item => item.indexClass.includes('four')).id;
					let nextId = this.movList.find(item => item.indexClass.includes('three')).id;
					this.movList[nextId].data = this.lastDataList[(this.dataIndex + 1) % this.lastDataList.length];
				}
			} else if (this.movType === 1) {
				this.movList[this.touchIndex].x = (this.moveX - this.clientX - 750) <= 0 ? (this.moveX - this.clientX - 750) : 0;
			} else if (this.movType === 2) {
				this.movList[this.touchIndex].x = (this.moveX - this.clientX) <= 0 ? (this.moveX - this.clientX) : 0;
			}
		},
		onTouchend(e) {
			if (this.movType === 1) {
				if ((this.moveX - this.clientX) < 50) {
					this.movList[this.touchIndex].x = -750;
					this.movType = 0;
				} else {
					this.switchCard();
				}
			} else if (this.movType === 2) {
				if ((this.moveX - this.clientX) > -50) {
					this.movList[this.touchIndex].x = 0;
					this.movType = 0;
				} else {
					this.switchCard();
				}
			}
		},
		switchCard() {
			this.canMove = false;
			if (this.movType === 1) {
				for (let i = 0; i < this.movList.length; i++) {
					const thisClass = this.movList[i].indexClass.split(' ')[0];
					switch (thisClass) {
						case 'one':
							setTimeout(() => {
								this.movList[i].conClass = '';
								this.movList[i].indexClass = 'left';
								this.movList[i].x = -750;
								this.dataIndex = (this.dataIndex - 1 + this.lastDataList.length) % this.lastDataList.length;
								this.canMove = true;
							}, 1000);
							break;
						case 'two':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'one';
							}, 500);
							break;
						case 'three':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'two';
							}, 500);
							break;
						case 'four':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'three';
							}, 500);
							break;
						case 'left':
							this.movList[i].conClass = '';
							this.movList[i].indexClass = 'four animate';
							this.movList[i].x = 0;
							setTimeout(() => {
								this.movList[i].indexClass = 'four';
							}, 500);
							break;
						default:
							break;
					}
				}
			} else if (this.movType === 2) {
				for (let i = 0; i < this.movList.length; i++) {
					const thisClass = this.movList[i].indexClass.split(' ')[0];
					switch (thisClass) {
						case 'one':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'two';
							}, 500);
							break;
						case 'two':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'three';
							}, 500);
							break;
						case 'three':
							setTimeout(() => {
								this.movList[i].conClass = 'animate';
								this.movList[i].indexClass = 'four';
							}, 500);
							break;
						case 'four':
							this.movList[i].conClass = '';
							this.movList[i].indexClass = 'left animate';
							this.movList[i].x = -750;
							setTimeout(() => {
								this.movList[i].indexClass = 'left';
								this.dataIndex = (this.dataIndex + 1) % this.lastDataList.length;
								this.canMove = true;
							}, 1000);
							break;
						case 'left':
							this.movList[i].conClass = '';
							this.movList[i].indexClass = 'one';
							this.movList[i].x = 0;
							break;
						default:
							break;
					}
				}
			}
			this.movType = 0;
		},
		handleClick(item) {
			this.$emit('click', item);
		}
	}
};
</script>

<style lang="scss">
@charset "UTF-8";

.mov-area-all {
	width: 750rpx;
	position: relative;
	box-sizing: border-box;

	.mov-view-list {
		position: absolute;
		left: 0;
		top: 0;
		width: 750rpx;
		height: 100%;
		transform: translateX(0rpx);

		.mov-area-con {
			height: 100%;
			position: relative;
			background-size: cover;
			background-position: center;
			border-radius: 10px;
			border: 1px solid #ccc;
			box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.1);
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			padding: 40rpx 0rpx 40rpx 40rpx;

			.vipCaed {
				width: 33%;
				height: 50%;
				color: #000;
				font-weight: 600;

				.vipCaedTitle {
					font-size: 32rpx;
				}

				.vipCaedNum {
					font-size: 68rpx;
				}
			}

			.vipCaedDesc {
				color: #000;
			}

			.rightButton {
				width: 200rpx;
				height: 60rpx;
				line-height: 60rpx;
				background-color: #fff;
				position: absolute;
				bottom: 40%;
				right: 0rpx;
				border-top-left-radius: 60rpx;
				border-bottom-left-radius: 60rpx;
				text-align: center;
			}
		}

		&.one {
			z-index: 1;

			.mov-area-con {
				width: 678rpx;
				left: 36rpx;
				top: 2rpx;

				&.animate {
					transition: all 0.5s;
				}
			}
		}

		&.two {
			z-index: 2;

			.mov-area-con {
				width: 686rpx;
				left: 32rpx;
				top: 10rpx;

				&.animate {
					transition: all 0.5s;
				}
			}
		}

		&.three {
			z-index: 3;

			.mov-area-con {
				width: 694rpx;
				left: 28rpx;
				top: 20rpx;

				&.animate {
					transition: all 0.5s;
				}
			}
		}

		&.four {
			z-index: 4;

			.mov-area-con {
				width: 702rpx;
				left: 24rpx;
				top: 30rpx;

				&.animate {
					transition: all 0.5s;
				}
			}
		}

		&.left {
			left: -750rpx;
			z-index: 5;

			.mov-area-con {
				width: 702rpx;
				left: 24rpx;
				top: 30rpx;

				&.animate {
					transition: all 0.5s;
				}
			}
		}

		&.animate {
			z-index: 5;
			transition: all 0.5s;
		}
	}
}
</style>